@import './variable.scss';

.contact {
  background-color: #1a4969;
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;

  .contact-left{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .filter-input {
    margin-top: px(3);
    margin-bottom: px(10);
    font-size: px(14);
    ::v-deep .el-input__inner{
      border-radius: px(5);
      height: px(32);
      line-height: px(32);
      font-size: px(14);
      background-color: #1a4969;
      border: 1px solid rgba(gray, 0.8);
      color: #fff;
    }
  }

  .el-table {
    flex: 1;
    background-color: #1a4969;
    color: #ffffff;
    font-size: px(14);

    ::v-deep .el-table__expand-icon{
      padding: px(2);
      font-size: px(14);
    }
  }

  .el-table__body-wrapper::-webkit-scrollbar {
    width: px(6);
  }

  ::v-deep .table-herder-custom,
  ::v-deep .table-cell-custom {
    background-color: #1a4969;
    color: #ffffff;
  }

  ::v-deep .gutter {
    display: none !important;
  }

  ::v-deep .el-table td,
  ::v-deep .el-table th.is-leaf {
    border: none;
  }

  ::v-deep .el-table__body {
    margin-right: 0;
  }

  ::v-deep .el-table__body tr:hover > td {
    background-color: #74aabf;
  }

  ::v-deep .el-table__body tr.current-row > td {
    background: #00bfff !important;
  }

  ::v-deep .el-table__expand-icon {
    color: #ffffff;
  }

  ::v-deep .aside-right {
    width: px(250) !important;
    border: 1px solid #00b2ee;
    border-radius: px(5);
    margin: px(10) px(5);
    // margin-bottom: 10px;

    .label-text {
      border-radius: 0;
      height: px(40);
      line-height: px(40);
      text-align: center;
      width: 100%;
      color: #fff;
      font-size: px(18);
      background-color: #698198;
      border-bottom: 1px solid #00b2ee !important;
    }

    .right-scrollbar {
      width: 100%;
      height: calc(100% - #{px(80)});
      background-color: #1a4969;
    }

    .right-scrollbar__wrap {
      width: auto;
      height: 110%;
      overflow-x: hidden;
    }

    .join-item {
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: px(5);
      margin: px(3) px(2);
      color: #fff;
      display: flex;
      flex-wrap: nowrap;
      font-size: px(14);

      &:hover {
        background-color: #409eff;
      }

      div {
        width: 50%;
        height: px(36);
        line-height: px(36);
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .join-footer {
      height: px(40);
      line-height: px(40);
      text-align: center;
      border-top: 1px solid #00b2ee !important;

      .el-button {
        width: px(80);
        height: px(30);
        background-color: #1a4969;
        color: #ffffff;
        padding: 0;
        font-size: px(14);
        border-radius: px(5);
        padding: 0;
      }

      .el-button:hover {
        background-color: #409eff;
      }
    }
  }

}